import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {Flex, Modal, Toast, WhiteSpace} from "antd-mobile";
import {DishDetailStore} from "../store";
import {dishTypeMap, oilyDegreeMap, seasonMap} from "../../../util-biz/biz-constant";
import constant from "../../../util/common/constant";
import DataLoading from "../../../util-biz/loading-data";
import ErrorPage from "../../../util-biz/error";
import history from "../../../util/router/history";
import PicCarousel from "../../../util-biz/pic-carousel";

interface IDishDetailProps {
  dishDetailStore?: DishDetailStore | any;
}

@inject('dishDetailStore')
@observer
export default class DishDesc extends Component<IDishDetailProps, any> {
  state={
    showCarousel: false
  };

  render() {
    const {dish, dishStatus} = this.props.dishDetailStore;
    if (dish === null) {
      if (dishStatus === 1) {
        return <DataLoading />;
      } else {
        return <ErrorPage tips="菜品不存在或出错啦..."/>;
      }
    }

    return (
      <>
        <Flex direction="column">

          {/* 菜品图片与菜名 */}
          <div className="dishPicBox" onClick={() => dish.dishPic && this.setState({showCarousel: true})}>
            {
              dish.dishPic ?
                <img className="dishPicCenter" src={constant.IMG_HOST + dish.dishPic} alt="dishImg"/> :
                <Flex className="none-img" justify="center" align="center"><i className="dishfont">&#xe669;</i></Flex>
            }
            <Flex className="nameOnePic" justify="between">
              <p className="text-h3">{dish.dishName}</p>
              <p onClick={(e) => {
                if (e) {
                  e.stopPropagation();
                }
                Toast.success(`已经吃过${dish.hotGrade}次啦`, 1.5);
              }}>
                <i className="dishfont">&#xe60f;</i><span>{dish.hotGrade}</span>
              </p>
            </Flex>
          </div>

          {/* 走马灯图片 */}
          {
            this.state.showCarousel &&
              <PicCarousel picArr={[constant.IMG_HOST + dish.dishPic]}
                           onClose={() => this.setState({showCarousel: false})} />
          }

          {/* 菜品标签 */}
          <Flex className="list-card-item first" direction="column" align="start">
            <p className="item-title">菜品标签</p>
            <Flex className="dishBasicInfo">
              <div className="my-tags season">
                <Flex><i className="dishfont">&#xe610;</i><span>{seasonMap[dish.season]}</span></Flex>
              </div>
              <div className="my-tags oily-degree">
                <Flex><i className="dishfont">&#xe606;</i><span>{oilyDegreeMap[dish.oilyDegree]}</span></Flex>
              </div>
              <div className="my-tags dish-type">
                <Flex><i className="dishfont">&#xe609;</i><span>{dishTypeMap[dish.dishType]}</span></Flex>
              </div>
            </Flex>
          </Flex>

          {/* 菜品简介 */}
          <Flex className="list-card-item" direction="column" align="start">
            <p className="item-title">菜品简介</p>
            <p className="item-brief">{dish.dishDesc ? dish.dishDesc : "..."}</p>
          </Flex>

          {/* 菜品素材与制作过程 */}
          <Flex className="list-card-item" direction="column" align="start">
            <p className="item-title">菜品素材与制作过程</p>
            <pre className="item-desc">{dish.dishSource ? dish.dishSource : "..."}</pre>
          </Flex>

        </Flex>

        <WhiteSpace style={{height: "0.7rem"}}/>

        <Flex
          className="fixed-btn-bottom"
          justify="between"
        >
          <Flex>
            <Flex className="radius-btn edit" justify="center" align="center" onClick={this._onEdit}>编辑</Flex>
            <Flex className="radius-btn del" justify="center" align="center" onClick={this._onDelete}>删除</Flex>
          </Flex>

          <Flex className="radius-btn eat" justify="center" align="center" onClick={this._onConfirm}>吃它</Flex>
        </Flex>
      </>
    );
  }

  /**
   * 跳转编辑
   * @private
   */
  _onEdit = () => {
    history.push(`/upload-dish`, {
      dishId: this.props.dishDetailStore.dish.dishId
    });
  };

  /**
   * 确定删除
   * @private
   */
  _onDelete = () => {
    const { confirmDelete } = this.props.dishDetailStore;
    Modal.alert('删除提示', '删除后无法恢复,确定删除么?', [
      { text: '取消', onPress: () => {} },
      { text: '确定删除', onPress: confirmDelete },
    ])
  };

  /**
   * 确定吃这个
   * @private
   */
  _onConfirm = () => {
    const { confirmEat } = this.props.dishDetailStore;
    Modal.alert('吃前提示', '确定今儿吃这个了么?', [
      { text: '取消', onPress: () => {} },
      { text: '吃它', onPress: confirmEat },
    ])
  };

}
